<template>

  <!--            用center-content统一每个导航点开的版面大小-->
  <div class="center-content">
    <!--                /////////////////////////////////////////-->
    <!--                党费缴纳的第一个版面-->
    <section class="self-money">
      <div class="self-money-header">
        <!--  这里money-header-select设置选项统一样式,而money-header-now设置选中选项的样式-->
        <div class="money-header-select money-header-now ">党费缴纳</div>
        <div class="money-header-select">缴费报告</div>
      </div>
      <div class="self-money-content">
        <div class="money-content-left">
          <div class="money-quarterly">2024年第一季度</div>
          <div class="money-pay">
            <span class="pay-text">您需缴费：</span>
            <span class="pay-num">￥</span>
            <span class="pay-num">6.66</span>
            <div class="money-pay-operate">立即缴纳</div>
          </div>
          <div class="pay-bill">
            <h4>缴费报告</h4>
            <!--                                表格-->
            <table class="pay-table-1">
              <thead>
              <tr class="pay-table-title">
                <th class="pay-table-time">时间</th>
                <th class="pay-table-recording">记录</th>
              </tr>
              </thead>
              <tbody>
              <tr class="pay-table-content">
                <td class="pay-table-time">2024-02-03  12:34</td>
                <td class="pay-table-recording">完成2024年第一季度缴费￥1.11</td>
              </tr>
              <tr class="pay-table-content">
                <td class="pay-table-recording"></td>
                <td></td>
              </tr>
              </tbody>
            </table>

            <div class="pay-more-recording">查看更多记录>>></div>
          </div>
        </div>
        <div class="money-content-right">
          <h3 class="pay-title">为什么缴纳党费？</h3>
          <p>党费，是党员向党组织交纳的用于党的事业和党的活动的经费。按照规定的标准，按期交纳党费，是党员对党组织应尽的义务，是共产党员必须具备的起码条件。党员交纳党费，不仅可以为党的活动提供部分资金，更重要的是能够增强党员的组织观念，提高党员的政治觉悟，保持党员对党的忠诚和热爱。党费的收缴、使用和管理，是党的基层组织建设和党员队伍建设中的一项重要工作。那么，党员的党费交多少？怎么交？党费用在哪了？计信党建和您一起学习。</p>
          <div class="pay-study">立刻学习>>></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>

</script>

<style scoped>
/*党费缴纳版面*/
.self-money{
  width:100%;
  height:100%;

}
.self-money-header{
  height:3.5rem;
  border-bottom: 1px solid rgba(166, 166, 166, 1);
  display: flex;
  padding-top: 8px;
  padding-left: 3rem;
}
.money-header-select{
  width: 60px;
  height: 20px;
  line-height: 2rem;
  text-align: center;
  letter-spacing: 2px;
  color:rgba(0, 0, 0, 1);
  font-size: 10px;
  border-radius: 30px;
  margin-right: 4rem;
  cursor: pointer;
}
.money-header-now{
  color:rgba(255, 255, 255, 1);
  background-color: rgba(156, 0, 0, 1);
}

.self-money-content{
  margin-top: 3rem;
  display: flex;
  height: 450px;
}
.money-content-left{
  margin-left: 4.3rem;
  margin-top: 5rem;
}
.money-quarterly{
  font-size: 14px;
  font-weight: 700;

}
.money-pay{
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  margin-top: 0.5rem;
}
.pay-text{

}
.pay-num{
  letter-spacing: 0;
  color:rgba(156, 0, 0, 1);
}
.money-pay-operate{
  width:9rem;
  height:3rem;
  line-height: 3rem;
  font-size: 16px;
  text-align: center;
  color:rgba(255, 255, 255, 1);
  border-radius: 60px;
  margin-left: 2rem;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(156, 0, 0, 1) 0%, rgba(255, 65, 59, 1) 100%);
}
.pay-bill{
  margin-top: 1rem;
}
.pay-bill h4{
  font-weight: 700;
  font-size: 12px;
}


.pay-table-1{
  width:31rem;
  height:15.5rem;
  text-align: center;
  border: 2px solid  rgba(166, 166, 166, 1);
  border-collapse: collapse;
  color:rgba(166, 166, 166, 1);
  letter-spacing: 0;
  font-weight: 700;
  margin-top: 1rem;
}
.pay-table-1 tr,.pay-table-1 th,.pay-table-1 td{
  border: 2px solid  rgba(166, 166, 166, 1);
}
.pay-table-title{
  width:100%;
  height:6rem;
  font-size: 12px;
  background: rgba(229, 229, 229, 1);
}
.pay-table-content{
  height:4.5rem;
  font-size: 10px;
}
.pay-table-time{
  width:13rem;

}
.pay-table-recording{

}
.pay-more-recording{
  width:31rem;
  height:4rem;
  background: rgba(229, 229, 229, 1);
  border: 2px solid rgba(166, 166, 166, 1);
  margin-top: 1.5rem;
  font-size: 10px;
  line-height: 4rem;
  text-align: center;
  letter-spacing: 2px;
  color:rgba(166, 166, 166, 1);
  cursor: pointer;
}

.money-content-right{
  margin-left: 10rem;
  margin-top: 5rem;
  width:60rem;
  height:30rem;
  border-radius: 60px;
  background: rgba(156, 0, 0, 1);
  padding:4.5rem 3.5rem;
  color:rgba(255, 255, 255, 1);
}
.pay-title{
  font-weight: 700;
  font-size: 2rem;
}
.money-content-right p{
  font-size: 12px;
  line-height: 2rem;
  letter-spacing: 2px;
  margin-top: 3rem;
}
.pay-study{
  color: rgba(166, 166, 166, 1);
  font-size: 10px;
  margin-left: 40rem;
  margin-top: 1.8rem;
  letter-spacing: 2px;
  cursor: pointer;
}


.pay-table-2{
  margin: 4.5rem 5rem;
  width:98rem;
  /*height:47rem;*/
  text-align: center;
  border: 2px solid  rgba(166, 166, 166, 1);
  border-collapse: collapse;
  color:rgba(166, 166, 166, 1);
}
.pay-table-2 tr,.pay-table-2 th,.pay-table-2 td{
  border: 2px solid  rgba(166, 166, 166, 1);
}
.pay-table-title-2{
  width:100%;
  height:6rem;
  font-size: 12px;
  background: rgba(229, 229, 229, 1);
}
.pay-table-content-2{
  height: 4rem;
}
.pay-table-time-2{
  width:31rem;

}
.pay-table-recording-2{

}
.money-footer{
  margin-left: 65rem;
  margin-top: 0rem;
}
</style>
